<template>
    <div>
        <!-- 头部 -->
        <h2>我是商品列表页</h2>
        <!-- 导航栏 -->
        <nav>
            <div class="scr_t">
                <div @click="fnSellStock">人气</div> <img src="../../assets/images/29.f6805b9.png" alt=""
                    class="scr_img_1">
                <div @click="fnPutOnTime">新品</div> <img src="../../assets/images/29.f6805b9.png" alt=""
                    class="scr_img_2">
                <div @click="fnPrice">价格</div> <img src="../../assets/images//30.8fdec4a.png" alt="" class="scr_img_3">
                <div @click="fnCount">销量</div> <img src="../../assets/images/29.f6805b9.png" alt="" class="scr_img_4">
            </div>
        </nav>
        <!-- 所有商品 -->
        <div class="singleAll">
            <div :id="item.id" class="singleGoodsContainer" v-for="item in goodsList" :key="item.id">
                <div class="mod">
                    <img alt="" class="none" src="">
                    <img :src="URL+item.gscMaincolPath" alt="" class="mod_img"
                        @click='fnTurnToDetails(item.id,item.goodsCode)'>
                    <div class="mod_d1">{{item.goodsName}}</div>
                    <div class="priceInfo">
                        <div class="discountPrice1">￥{{item.discountPrice}}</div>
                        <div class="originalPrice1" :class="item.discount==1?'none':''">￥{{item.originalPrice}}</div>
                        <div class="discount1 " :class="item.discount==1?'none':''">{{item.discount}}折</div>
                    </div>
                    <span class="newGoods" v-if="item.discount==1?true:false"><img
                            src="http://cdn.bestseller.com.cn/coverPic/newGoods.png" alt=""></span>
                    <span class="discountImg" v-if="item.discount!=1?true:false"><img
                            src="http://cdn.bestseller.com.cn/coverPic/discountImg.png" alt=""></span>
                    <button class="mod_btn" @click="fnCart(true,item.id,item,item.goodsCode)">加入购物车</button>
                </div>
            </div>
        </div>

        <!-- 购物车 -->
        <cartPop v-if="isShow" @pop-click="isShow=false"
            :msg="{goodsId:this.goodsId,goodsCode:this.goodsCode,classId:this.classId}" />

    </div>



</template>

<script>
    import cartPop from '../../components/CartPop'
    import axios from 'axios'
    import {
        goodsList,
        goodsCartPop,
    } from '@/api/goodsList'
    export default {
        // 挂在购物车组件
        components: {
            cartPop
        },
        // 基础数据
        data() {
            return {
                goodsList: [],
                URL: 'https://m.selected.com.cn',
                isShow: false,
                // goodsId: 0,
                goodsCode: 0,
                // classId:0,

            }
        },
        async created() {
            //    console.log(this.$router);
            //    console.log(this.$router.apps[0]._route.params.classifyId);
            // -----------------
            let classifyId = this.$router.apps[0]._route.params.classifyId
            this.classId = this.$router.apps[0]._route.params.classifyId
            let res = await goodsList(classifyId)
            console.log(res)
            this.goodsList = res.data.data
            // 购物车数据
            // console.log(this.goodsCode);
            // let resCart = await goodsCartPop(this.goodsCode)
            // console.log(resCart);

        },





        methods: {
            fnPrice() {
                this.goodsList.sort(this.sortMethods('discountPrice'))
            },
            fnCount() {
                this.goodsList.sort(this.sortMethods('sellCount'))
            },
            fnPutOnTime() {
                this.goodsList.sort(this.sortMethods('sort', 1))
            },
            fnSellStock() {
                this.goodsList.sort(this.sortMethods('sellStock'))
            },
            sortMethods(property, num) {
                return function (a, b) {
                    var value1 = a[property]
                    var value2 = b[property]
                    if (num == 1) {
                        return value2 - value1
                    } else if (num == undefined) {
                        return value1 - value2
                    }
                }
            },
            // 点击购物车跳转购物车组件
            fnCart(bool, id, item, goodsCode) {
                this.isShow = bool
                this.goodsId = id
                this.goodsCode = goodsCode


                // goodsList 判断ID后直接存入状态机中 
                this.goodsList.forEach(v => {
                    if (v.id == this.goodsId) {
                        // console.log(1);
                        this.$store.commit('cart/cartAdd', v)
                    }
                })
                // this.$store.commit('cart/cartAdd',this.goodsList)

            },
            // 点击图片跳转详情页
            fnTurnToDetails(id, goodsCode) {
                console.log(goodsCode);
                this.$router.push({
                    name: 'details',
                    params: {
                        goodsCode: goodsCode
                    }
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    @import url(../../assets/css/goodsList.css);
</style>